<template>
  <div>
    <div class="out_center">
      <!--中间内容!-->
      <div>
        <!--!swipers-->
         <Swipers></Swipers>
        <!--tab!-->
        <div class="container">
          <div class="container_message">
            <div style="color: #8A2BE2; font-size: 20px; font-weight: bolder; padding-bottom: 20px;">近期直播</div>
          </div>
          <Tabs></Tabs>
        </div>

        <!--直播!-->
        <div class="container">
          <div class="container_message">
            <div style="color: #8A2BE2; font-size: 20px; font-weight: bolder;">直播课</div>
            <div style="margin-left: 1080px;">
              <p>查看更多>></p>
            </div>
          </div>
          <Lives></Lives>
        </div>
        <!--课程!-->
        <div>
          <div class="container_message">
            <div style="color: #8A2BE2; font-size: 20px; font-weight: bolder;">系统课</div>
            <div style="margin-left: 1080px;">
              <p>查看更多>></p>
            </div>
          </div>
          <Lessons></Lessons>
        </div>


      </div>
    </div>

  </div>
</template>

<script>
  import Lessons from './common/lessons.vue'
  import Lives from './common/lives.vue'
  import Swipers from './common/swipers.vue'
  import Tabs from './common/tabs.vue'
  export default {
    name: 'Index',
    components: {
      "Lessons": Lessons,
      "Lives": Lives,
      "Swipers":Swipers,
      "Tabs":Tabs

    },
    data() {
      return {

      }
    },

  }
</script>

<style scoped>


  /**
   * 直播
   */
  .container {
    /* 	background-color: red; */
    margin-top: 50px;
    padding-top: 20px;
  }

  .container_message {
    display: flex;
  }
</style>
